<template>
  <div class="vue-meta-node-wrapper" :class="selected ? 'selected' : ''">
    <div class="body" :class="nodeType"></div>
  </div>
</template>

<script>
export default {
  name: "vue-model-node",
  inject: ["getGraph", "getNode"],
  data() {
    return {
      nodeData: this.getNode().getData(),
      name: this.getNode().getData().name,
    };
  },
  computed: {
    selected() {
      return this.nodeData.selected;
    },
    nodeType() {
      return this.nodeData.type.split(".")[1];
    },
  },
};
</script>

<style lang="less">
.vue-meta-node-wrapper {
  width: 100%;
  height: 100%;
  // border: 1px solid #2c3539;
  // border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;

  // display: flex;
  // flex-direction: column;

  &.selected {
    border-color: rgb(154, 205, 50);
    box-shadow: 0 0 2px 2px rgba(154, 205, 50, 0.4);
  }

  .body {
    width: 100%;
    height: 100%;
    // background-image: url("./images/subtract.png");
    background-size: 100% 100%;

    &.add {
      background-image: url("./images/add.png");
    }

    &.subtract {
      background-image: url("./images/subtract.png");
    }

    &.multiply {
      background-image: url("./images/multiply.png");
    }

    &.divide {
      background-image: url("./images/divide.png");
    }
  }
}
</style>
